<script setup>
import {onMounted, ref} from "vue";
import {message} from "ant-design-vue";

const formData = ref({})

async function handleSave() {
  const hide = message.loading('保存中', 0)
  const value = formData.value;
  const data = Object.entries(value).map(([k, v]) => ({ key: k, value: v }));
  try {
    await window.setting.save(data)
    message.success('设置已更新')
  } finally {
    hide()
  }
}

onMounted(() => {
  window.setting.getList()
      .then(data => {
        console.log(data)
        formData.value = data.map(item => item.dataValues).reduce((prev, curr) => {
          prev[curr.key] = curr.value
          return prev
        }, {})
      })
})
</script>

<template>
  <div class="page">
    <a-form style="width: 400px">
      <h3>导入设置</h3>
      <a-form-item label="从第?行开始">
        <a-input v-model:value="formData.startRowOfImport"/>
      </a-form-item>
      <h3>提醒设置</h3>
      <a-form-item label="提前几天提醒">
        <a-input v-model:value="formData.advanceNoticeDays"/>
      </a-form-item>
    </a-form>

    <div class="bottom">
      <a-flex justify="flex-end">
        <a-button type="primary" @click="handleSave">保存</a-button>
      </a-flex>
    </div>
  </div>
</template>

<style scoped lang="sass">
.page
  .bottom
    position: absolute
    bottom: 10px
    left: 10px
    right: 10px
</style>
